<template>
  <div class="star" :class="`star-${size}`">
    <span class="star-item" :class="stars" v-for="(stars , index) in straClasses" :key="index"></span>
  </div>
</template>

<script>
  export default {
    props: {
      size: Number, //图片大小的接收数据
      star: Number  //接收
    },
    computed:{
      //计算得来的数据，商家是属于多少个星星
      straClasses(){
        const {star} = this
        const arr = []
        //on
        const starOn = Math.floor(star)
        for(let i=0; i<starOn; i++){
          arr.push('on')
        }
        //half
        if(star*10 - starOn*10 > 5){
          arr.push('half')
        }
        //off
        if(arr.length < 5){
          arr.push('off')
        }
        return arr
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import '../../common/stylus/minxins.styl';
  .star //2x图 3x图
    float left
    font-size 0
    .star-item
      display inline-block
      background-repeat no-repeat
    &.star-48
      .star-item
        width .75rem
        height .75rem
        margin-right .825rem
        background-size .75rem .75rem
        &:last-child
          margin-right: 0
        &.on
          bg-image('./images/star48_on')
        &.half
          bg-image('./images/star48_half')
        &.off
          bg-image('./images/star48_off')
    &.star-36
      .star-item
        width .563rem
        height .563rem
        margin-right .225rem
        background-size .563rem .563rem
        &:last-child
          margin-right 0
        &.on
          bg-image('./images/star36_on')
        &.half
          bg-image('./images/star36_half')
        &.off
          bg-image('./images/star36_off')
    &.star-24
      .star-item
        width .375rem
        height .375rem
        margin-right .112rem
        background-size .375rem .375rem
        &:last-child
          margin-right 0
        &.on
          bg-image('./images/star24_on')
        &.half
          bg-image('./images/star24_half')
        &.off
          bg-image('./images/star24_off')
</style>
